<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>taobao</title>
    <style type="">
        img{
            border: none;
            /*vertical-align:【定义和用法】设置元素的垂直对齐方式
                                    【说明】定义行内元素的基线/所在行的基线/的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式*/
            vertical-align: top;
        }
        #box{
            width: 685px;
            height: 275px;
            position: relative;
            margin: 30px auto;
            /*overflow:【定义和用法】规定当内容溢出元素框时发生的事情
                              【说明】定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此有可能即使元素框中可以放下所有内容也会出现滚动条【可能的值】visible hidden scroll auto inhert*/
            overflow: hidden;
        }
        ul{
            width: 685px;
            position: absolute;
            left: 0px;
            top: 0px;
            /*z-index:【定义和用法】设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面【说明】设置的是一个定位元素沿着Z轴的位置，Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远【可能的值】auto number inherit*/
            z-index: 1;
        }
        ul li{
            width: 685px;
            display: none;
        }
        ol{
            z-index: 2;
            width: 120px;
            position: absolute;
            right: 125px;
            top: 235px;
            bottom: 10px;
        }
        ol li{

            width: 20px;
            height: 20px;
            float: left;
            margin: 0 2px;
            display: inline;
            background: #fff;
            color: #ff0000;
            border-radius: 50%;
            /*line-height:【定义和用法】设置行间的距离行高
                                【说明】会影响行框的布局，在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离
                                【可能的值】normal number length % inherit*/
            line-height: 20px;
            /*text-align:【定义和用法】规定元素中的文本的水平对齐方式*/
            text-align: center;
        }
        ol .active{
            background: #ff0000;
            color: #fff;
        }
    </style>

    <script>
        function change() {
            // 变量定义
            var  oUl = document.getElementsByTagName('ul')[0] ;
            var aLiUl = oUl.getElementsByTagName('li');

            var  oOl = document.getElementsByTagName('ol')[0] ;
            var aLiOl = oOl.getElementsByTagName('li');

            // 按钮的切换
            for (var i =0 ; i < aLiOl.length ; i++) {
                // 为按钮和图片对应一个数量关系，加索引
                aLiOl[i].index = i ;
                aLiOl[i].onmouseover = function() {
                    for (var i =0 ; i < aLiOl.length ; i++) {
                        // 之前的按钮效果全部撤销
                        aLiOl[i].className = ' ' ;
                        // 之前的图片全部隐藏
                        aLiUl[i].style.display = 'none' ;
                    }
                    this.className = 'active' ;
                    // 对应索引值的图片显示出来
                    aLiUl[this.index].style.display = 'block' ;
                }
            };
        }



    </script>

</head>
<body onload="change()">
<div id="box">
    <ul>
        <li style="display:block"><img src="images/1.jpg" alt=""/></li>
        <li><img src="images/2.jpg" alt=""/></li>
        <li><img src="images/3.jpg" alt=""/></li>
        <li><img src="images/4.jpg" alt=""/></li>
        <li><img src="images/5.jpg" alt=""/></li>

    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>

</body>
</html>
